<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="80px"
    class="demo-ruleForm"
  >
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="域属性" name="1">
        <el-form-item label="字段标识">
          <el-input v-model="ruleForm.fieldName" size="small" />
        </el-form-item>
        <el-form-item label="字段别名">
          <el-input v-model="ruleForm.controlName" size="small" />
        </el-form-item>
        <el-form-item label="字段类型">
          <el-select
            v-model="ruleForm.dataType"
            size="small"
            placeholder="请选择字段类型"
            @change="handataType"
          >
            <el-option
              v-for="(item, index) in dataTypes"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="默认值">
          <el-input v-model="ruleForm.defaultVal" size="small" />
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="控件属性" name="2">
        <el-form-item
          v-for="(item, index) in formItem"
          :key="index"
          :label="item.name"
        >
          <el-switch
            v-if="item.type === 'switch'"
            v-model="ruleForm[item.model]"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />

          <el-cascader
            v-if="item.type === 'cascader'"
            v-model="ruleForm[item.model]"
            :disabled="disabled"
            :options="datalist"
            :placeholder="item.placeholder"
            :show-all-levels="false"
          />

          <el-input
            v-if="item.type === 'input'"
            v-model="ruleForm[item.model]"
            size="small"
            style="width: 100%"
            :placeholder="item.placeholder"
            :maxlength="item.maxlength"
          />

          <el-select
            v-if="item.type === 'select'"
            v-model="ruleForm[item.model]"
            size="small"
            style="width: 100%"
            clearable
            :multiple="item.multiple"
            :filterable="item.filterable"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(option, optionIndex) in item.options"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            />
          </el-select>

          <el-radio-group
            v-if="item.type === 'radio'"
            v-model="ruleForm[item.model]"
            size="small"
          >
            <el-radio
              v-for="(radio, radioIndex) in item.options"
              :key="radioIndex"
              :label="radio.label"
              :value="radio.value"
            />
          </el-radio-group>

          <el-checkbox-group
            v-if="item.type === 'checkbox'"
            v-model="ruleForm[item.model]"
            size="small"
          >
            <el-checkbox
              v-for="(checkbox, checkboxIndex) in item.options"
              :key="checkboxIndex"
              :label="checkbox.label"
              :value="checkbox.value"
            />
          </el-checkbox-group>
        </el-form-item>

        <hr v-if="'select|checkbox|radio'.includes(elType) && elType">

        <div v-if="'select|checkbox|radio'.includes(elType) && elType">
          <div class="title">
            <span>选项</span>
          </div>
          <div class="option-configure">
            <div
              v-for="(option, index) in ruleForm.options"
              :key="index"
              class="option-item"
            >
              <el-input
                v-model="option.label"
                class="option-input option-label"
                placeholder="label"
                size="small"
              />
              <el-input
                v-model="option.value"
                class="option-input option-value"
                placeholder="value"
                size="small"
              />
              <el-button
                type="danger"
                icon="el-icon-minus"
                size="small"
                plain
                circle
                @click="delOptions(index)"
              />
            </div>
          </div>
          <el-button type="text" @click="addOptions">添加选项</el-button>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import attrInfo from './attribute'
export default {
  name: 'Attribute',
  data() {
    return {
      ruleForm: {},
      rules: {},
      formItem: [],
      elType: '',
      activeName: '1',
      disabled: true,
      dataTypes: [
        {
          label: '文本',
          value: 'string'
        },
        {
          label: '整数',
          value: 'integer'
        },
        {
          label: '小数',
          value: 'double'
        },
        {
          label: 'True/False',
          value: 'boolean'
        },
        {
          label: '超链接',
          value: 'url'
        },
        {
          label: '日期',
          value: 'date'
        }
      ],
      datalist: []
    }
  },
  watch: {
    ruleForm: {
      handler(val) {
        this.$emit('handleChange', val)
      },
      deep: true
    },
    options: {
      handler(val) {
        this.$emit('handleOptionsChange', val)
      },
      deep: true
    }
  },
  methods: {
    setDefaultData(obj) {
      this.ruleForm = {}
      this.elType = obj.type
      this.$setObjDatas(this.ruleForm, obj)
      this.formItem = this.getFormItem(obj.type)
      this.setOptions(obj.type)
      this.initFormDataForCheckBox()
    },
    getFormItem(type) {
      return attrInfo.filter((item) => {
        return type === item.name
      })[0].attrs
    },
    addOptions() {
      const temp = {
        label: '',
        value: ''
      }
      this.ruleForm.options.push(temp)
    },
    delOptions(index) {
      this.ruleForm.options.splice(index, 1)
    },
    initFormDataForCheckBox() {
      this.formItem.map((item) => {
        if (item.type === 'checkbox') {
          this.$set(this.ruleForm, item.model, [])
        }
      })
    },
    setOptions(type) {
      if (
        (type === 'select' || type === 'radio' || type === 'checkbox') &&
          !this.ruleForm.options
      ) {
        this.$set(this.ruleForm, 'options', [])
      }
    },
    handataType(type) {
      if (type === 'integer') {
        this.disabled = false
        this.datalist = [
          {
            value: 1,
            label: '无'
          },
          {
            value: 2,
            label: '数字'
          },
          {
            value: 3,
            label: '货币符号',
            children: [
              {
                value: 'china',
                label: '￥中文(简体,中国)'
              }
            ]
          }
        ]
      } else if (type === 'double') {
        this.disabled = false
        this.datalist = [
          {
            value: 1,
            label: '无'
          },
          {
            value: 2,
            label: '数字'
          },
          {
            value: 3,
            label: '百分比'
          },
          {
            value: 4,
            label: '货币符号',
            children: [
              {
                value: 'china',
                label: '￥中文(简体,中国)'
              }
            ]
          }
        ]
      } else if (type === 'date') {
        this.disabled = false
        this.datalist = [
          {
            value: 1,
            label: '无'
          },
          {
            value: 2,
            label: '日期显示格式',
            children: [
              {
                value: '2001-03-14',
                label: '2001-03-14'
              },
              {
                value: '2001/03/14',
                label: '2001/03/14'
              },
              {
                value: '2001.03.14',
                label: '2001.03.14'
              }
            ]
          }
        ]
      } else if (type !== 'integer' || type !== 'double' || type !== 'date' || type === '') {
        this.disabled = true
        this.datalist = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-button--text {
    padding: 0;
  }
  .option-item {
    margin-bottom: 20px;
    display: flex;
  }
  .option-input {
    width: 90px;
    margin-right: 5px;
  }
  .el-button.is-circle {
    flex: 1;
    padding: 8px;
  }
  .el-icon {
    font-size: 32px;
    &:hover {
      color: red;
    }
  }
</style>
